<template>
    <eui-background type="common">
        <eui-nav-bar title="拣货任务" color="#fff" />
        <view style="padding: 0 15rpx">
            <view class="flex">
                <eui-search-bar @confirm="searchConfirm" radius="100" leftIcon="icon-saoyisao" @clear=""
                    placeholder="拣货任务单号">
                </eui-search-bar>
                <eui-search-bar @confirm="changeGds" radius="100" leftIcon="icon-saoyisao" @clear=""
                    placeholder="商品编码/条码">
                </eui-search-bar>
            </view>
        </view>
        <view class="footer" :style="{ height: height + 'px', 'overflow-y': 'scroll' }">
            <DetailPickTaskItem :scope="pickTaskDetail" />
            <Title :type="pickTaskDetail?.pickTaskStatus == '1' ? '拣货' : '合流'" />
            <scroll-view scroll-y="true" style="width: 100%;box-sizing: border-box;overflow-y: scroll;">
                <PickGoodsList :scope="pickTaskDetail" :type="pickTaskDetail?.pickTaskStatus == '1' ? '拣货' : '合流'"
                    :goodsList="goodsList" type="readlyOnly" />
                <view style="background: #F2F2F2;padding: 15rpx;">
                    <view v-for="(item, index) in goodsList[0]?.bcmConfluenceTaskDetailList" v-if="goodsList.length"
                        class="bg-white" style="margin-bottom: 15rpx;border-radius: 10rpx;padding: 0 15rpx 15rpx;">
                        <view
                            style="font-size: 28rpx;border-bottom: 1rpx solid #e1e1e1;height: 70rpx; line-height: 70rpx;">
                            合流库位 <text class="bold"> {{ item.confluenceLocationCode }}</text></view>
                        <view class="flex just-between align-center" style="margin: 10rpx 0;">
                            <view class="flex align-center">
                                <view class="chnlbox"
                                    :style="{ backgroundColor: getBcmDictItem('chnlType', item.chnlType).color, color: getBcmDictItem('chnlType', item.chnlType).color ? '#fff' : '#000' }"
                                    v-if="getBcmDictName('chnlType', item.chnlType)">
                                    {{ getBcmDictName('chnlType', item.chnlType).substring(0, 1) }}
                                </view>
                                <view class="chnltype"
                                    :style="{ backgroundColor: getBcmDictItem('chnlType', item.chnlType).color, color: getBcmDictItem('chnlType', item.chnlType).color ? '#fff' : '#000' }"
                                    v-else>
                                    {{ getBcmDictName('chnlType', item.chnlType) }}
                                </view>
                                <view v-if="!!item.thirdOrderIndex"
                                    style="font-size: 36rpx;font-weight: bold;margin-left: 10rpx;">
                                    <text>#</text>{{ item.thirdOrderIndex }}
                                </view>
                            </view>
                            <view class="flex align-center just-between">
                                <view style="font-size: 24rpx;color: #626262">数量<text style="font-size: 32rpx;"
                                        class="bold co-00"> x{{ item.goodsNum }}</text></view>
                                <view style="font-size: 24rpx;color: #626262;flex: 1;margin-left: 20rpx;"
                                    class="flex align-center just-between">
                                    <text>实拣</text>
                                    <text style="font-size: 32rpx;margin-left: 8rpx;" class="bold co-00"> x</text>
                                    <input placeholder-style="font-size: 32rpx;" type="number" class="bold co-00"
                                        v-model="item.pickNum"
                                        style="padding: 2rpx 0 2rpx 6rpx;background-color: #F3F3F3;width: 200rpx;font-size: 32rpx;" />
                                </view>
                            </view>
                        </view>
                        <view style="color: red;font-size: 24rpx">{{ item.orderRemark }}</view>
                    </view>
                </view>
            </scroll-view>
        </view>
        <view class="bottom"
            v-if="(pickTaskDetail?.pickTaskStatus == '1') || (pickTaskDetail?.pickTaskStatus == '2' && pickTaskDetail?.confluenceStatus != '1')">
            <eui-button type="max2" title="返回" @click="back" />
            <eui-button type="max" title="确认合流" @click="mergeComplete"
                v-if="pickTaskDetail?.pickTaskStatus == '2' && pickTaskDetail?.confluenceStatus != '1'"
                style="margin-left: 20rpx;" />
        </view>

    </eui-background>
</template>
<script setup lang="js">
import { ref, computed, onMounted } from 'vue'
import { getBcmDictName, getBcmDictItem } from '../../../hooks/bcmUseUntils';
import { onLoad } from "@dcloudio/uni-app";
import DetailPickTaskItem from './components/DetailPickTaskItem';
import PickGoodsList from './components/PickGoodsList';
import Title from './components/Title';
import service from '../../../common/service';
import { bcmRequest, getBcmUrl } from '../../../hooks/bcmServices';

const bcmUrl = getBcmUrl()
const GoodsBarcode = ref('')
const BillId = ref('')
const StoreCode = ref('')
const pickTaskDetail = ref()
const height = ref('')
const goodsList = ref([])

const getData = async (id, storeCode) => {
    service.enjoyShowLoading('正在加载...')
    const param = {
        IsNotPage: true,
        QueryCountFlag: false,
        WhereList: [
            { c_col: "pickTaskNo", c_oper: "等于", c_value: id },
            { c_col: "storeCode", c_oper: "等于", c_value: storeCode }
        ]
    }
    const response = await bcmRequest(bcmUrl.orderApi, '拣货任务表', 'QueryPickTaskList', param);
    service.enjoyHideLoading();
    pickTaskDetail.value = response.ReturnObject[0];
    let list = []
    response.ReturnObject[0].bcmPickTaskDetailList?.map(v => {
        v.num = response.ReturnObject[0].pickTaskStatus == '1' ? 0 : v.goodsNum - v.stockoutNum;
        list.push(v)
    })
    goodsList.value = list?.filter(v => v.goodsBarcode == GoodsBarcode.value);
    let a = goodsList.value[0].goodsNum - goodsList.value[0].stockoutNum, total = 0, firstIndex = null;

    goodsList.value[0].bcmConfluenceTaskDetailList?.sort((a, b) => b.goodsNum - a.goodsNum)
    goodsList.value[0].bcmConfluenceTaskDetailList?.forEach((v, i) => {
        if (v.goodsNum >= a) {
            v.pickNum = a;
            // 记录满足条件的索引，这里简化为只记录第一个满足条件的索引
            let firstIndex = i;
            return;
        } else {
            v.pickNum = v.goodsNum;
            total += v.goodsNum
            if (total >= a) {
                v.pickNum = total - a;
                // 记录满足条件的索引，这里简化为只记录第一个满足条件的索引
                let firstIndex = i;
                return;
            }
        }

    })
    goodsList.value[0].bcmConfluenceTaskDetailList.forEach((v, i) => {
        if (i > firstIndex) {
            v.pickNum = 0;
        }
    });
}

const handleInput = (index) => {

}

const searchConfirm = (e) => {
    uni.navigateTo({
        url: './detail?id=' + e.value + '&storeCode=' + StoreCode.value
    })
}

const changeGds = (e) => {
    let goodsItemList = pickTaskDetail.value.bcmPickTaskDetailList.filter(v => v.goodsBarcode == e.value || v.goodsCode == e.value);
    if (goodsItemList.length) {
        goodsList.value = goodsItemList
    }
    // console.log(goodsList.value,'goodsList.valuegoodsList.value',goodsItemList)
}

const back = () => {
    uni.navigateBack()
}

const mergeComplete = () => {
    pickTaskConfirmConfluence()
}

const pickTaskConfirmConfluence = async () => {
    service.enjoyShowLoading('正在加载...')
    const param = {
        pickTaskDetailId: goodsList.value[0].pickTaskDetailId,
        pickTaskNo: pickTaskDetail.value.pickTaskNo,
        confluenceGoodsDetailList: []
    }, goodsListItem = goodsList.value[0];
    const { bcmConfluenceTaskDetailList, goodsBarcode, goodsCode } = goodsListItem;
    bcmConfluenceTaskDetailList?.map((v, i) => {
        param.confluenceGoodsDetailList.push({
            confluenceTaskDetailId: v.confluenceTaskDetailId,
            goodsBarcode,
            goodsCode,
            goodsNum: v.pickNum
        })
    })
    const response = await bcmRequest(bcmUrl.orderApi, '拣货任务表', 'PickTaskDetailConfluence', param);
    service.enjoyHideLoading();
    // uni.navigateTo({
    //     url: './detail?id=' + BillId.value + '&storeCode=' + StoreCode.value
    // })
    uni.navigateBack()
}

onMounted(() => {
    uni.getSystemInfo({
        success: function (res) { // res - 各种参数 
            let info = uni.createSelectorQuery().select(".navigation");
            info.boundingClientRect(function (data) { //data - 各种参数
                height.value = res.windowHeight - data.height - 48 - 60 - 97;
            }).exec()
        }
    });
})

onLoad(async (options) => {
    let id = options?.id, storeCode = options?.storeCode;
    BillId.value = id;
    StoreCode.value = storeCode;
    GoodsBarcode.value = options?.barcode;
    getData(id, storeCode)
})
</script>
<style lang="scss">
@import "../common/common.css";

.content {
    padding: 0;
    background-color: #fff;
}

.content-img {
    height: 100%;
    background: #fff;
    background-repeat: no-repeat;
    background-size: 100% 150px;
}

.navigation {
    flex: 0 0 auto;
    // background: linear-gradient( 180deg, #4595F9 0%, rgba(14,219,229,0) 100%);
}

.footer {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.bottom {
    display: flow-root;
    height: 97rpx;
    // border-bottom-left-radius: $uni-border-radius-lg;
    // border-bottom-right-radius: $uni-border-radius-lg;
    padding: 16rpx 40rpx;
    text-align: right;
    background: #fff;
}

.popup-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    background-color: #fff;

    .popup-title {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        height: 100rpx;
        padding-right: 36rpx;
        padding-left: 30rpx;
        font-size: 33rpx;
        line-height: 100rpx;
        border-bottom: 1rpx solid #f1f1f1;
    }
}
</style>